<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
		<title>请假详情</title>

		<!-- 引入样式文件 -->
		<!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@4/lib/index.css" /> -->
		<link rel="stylesheet" href="/wechat/css/vantIndex.css">

		<style scoped>
			.leave-record-list {
				background-color: #f7f8fa;
				/* min-height: 100vh; */
			}

			.record-card {
				background: #fff;
				border-radius: 12px;
				padding: 16px;
				margin-bottom: 16px;
				position: relative;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
			}

			.avatar-section {
				display: flex;
				align-items: center;
				margin-bottom: 12px;
			}

			.avatar {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-right: 12px;
			}

			.student-name {
				font-size: 16px;
				font-weight: 500;
				color: #333;
			}

			.record-info {
				padding-right: 40px;
			}

			.info-row {
				margin-bottom: 8px;
				font-size: 14px;
				line-height: 1.5;
			}

			.label {
				color: #666;
			}

			.value {
				color: #333;
			}

			.time-info {
				margin-top: 12px;
				padding-top: 12px;
				border-top: 1px solid #eee;
			}

			.time-row {
				color: #999;
				font-size: 12px;
				margin-bottom: 4px;
			}

			.status-section {
				position: absolute;
				top: 16px;
				right: 16px;
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 12px;
			}

			.status-icon {
				width: 124px;
				height: 83px;
			}

			.delete-icon {
				font-size: 20px;
				color: #ff4d4f;
				padding: 4px;
			}

			/* 暗黑模式支持 */
			@media (prefers-color-scheme: dark) {
				.leave-record-list {
					background-color: #1c1c1e;
				}

				.record-card {
					background-color: #2c2c2e;
				}

				.student-name {
					color: #fff;
				}

				.label {
					color: #999;
				}

				.value {
					color: #fff;
				}

				.time-info {
					border-top-color: #3a3a3c;
				}

				.time-row {
					color: #666;
				}
			}
			
			.backtn-div {
				font-size: 1.4rem;
				padding: 0.4rem 0.6rem;
				background-color: #ffc526;
				margin-bottom: 40px;
			}
		</style>
		<script src="/wechat/js/vue@3.js"></script>
		<script src="/scriptZIP/qs.min.js"></script>
		<!-- 引入 Vue 和 Vant 的 JS 文件 -->
		<script src="/wechat/js/vant.min.js"></script>
<!-- 		<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@4/lib/vant.min.js"></script> -->
		<script src="/scriptZIP/axios.min.js"></script>
		<script src="/scriptZIP/dayjs.min.js"></script>
		<script src="/js/common.js"></script>
	</head>

	<body>

		<div class="leave-record-list" id="app">
			<div class="backtn-div">
				<van-icon name="arrow-left" @click="goBack" />
			</div>	

			<!-- 请假记录列表 -->
			<div class="record-list">
				<!-- 已同意的请假记录 -->
				<div class="record-card" >
					<div class="avatar-section">
						<img src="../image/img/header2.png" alt="头像" class="avatar" />
						<span class="student-name">{{OjbList.studentName}}</span>
					</div>
					<div class="record-info">
						<div class="info-row">
							<span class="label">课程：</span>
							<span class="value">{{OjbList.courseNames}}</span>
						</div>
						<div class="info-row">
							<span class="label">请假理由：</span>
							<span class="value">{{OjbList.reason}}</span>
						</div>
						<div class="info-row">
							<span class="label">审批人：</span>
							<span class="value">{{OjbList.applicantName}}</span>
						</div>
						<div class="info-row time-info">
							<div class="time-row">申请时间</div>
							<div class="time-row">开始时间：{{OjbList.startTime}}</div>
							<div class="time-row">结束时间：{{OjbList.endTime}}</div>
						</div>
					</div>
					<div class="status-section">
						<img v-if="OjbList.status == 0" src="../image/img/shenhe_icon.png" alt="待审核" class="status-icon" />
						<img v-if="OjbList.status == 1" src="../image/img/tongyi_icon.png" alt="已同意" class="status-icon" />
						<img v-if="OjbList.status == 2" src="../image/img/jujue_icon.png" alt="未通过" class="status-icon" />
					</div>
				</div>


			</div>
		</div>




		<script>
			
			// 初始化 Vue 实例
			const app = Vue.createApp({
				data() {
					return {
						searchValue: '',
						loading: true,
						finished: false,
						list: [],
						studentStatus: '',
						schoolId: '',
						refreshing: false,
						pageNum: 1,
						pageSize: 10,
						OjbList: {},
						statusList: ['待审核', '通过', '未通过']
						
					};
				},
				created: function () {
					this.schoolId = params().id;
					// this.studentId = params().id;
					this.getList()

				},
				methods: {
					goUrl(url) {
						window.location = url
					},
					goBack() {
						history.back();
					},
					getList() {
						axios.get('/t/leave/getByLeave/' + this.schoolId).then(function (res) {
							this.OjbList = res.data
							// if (res.data.list.length > 0) {
							// 	 res.data.list.forEach(item => {
							// 		this.list.push(item)
							// 	});
							// }
							// this.loading = false;
							// this.finished = true;
							// if (this.list.length >= this.OjbList.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.finished = false;
							//   this.pageNum++;
							// }
							 // this.finished = true; // 没有更多数据了
							// console.log('33344', this.list.length, res.data.total)
							// if (this.list.length >= res.data.total) {
							//   this.finished = true; // 没有更多数据了
							// } else {
							//   this.pageNum += 1;
							//   }
						}.bind(this));
					}

				},
			});

			app.use(vant);
			app.mount("#app");
		</script>
	</body>
</html>